<!-- 设备手册 -->
<template>
  <px-scrollbar height="calc(100vh - 268px)">
    <px-form v-if="type === 'edit'" ref="ruleFormRef" :rules="rules" inline :model="formValue" label-width="100px">
      <!-- <FileUpload
        fileType="edit"
        :actionUrl="'/ifp/dms/api/v1/doc/upload'"
        :downloadUrl="'/ifp/dms/api/v1/doc/download'"
        :fileData="{ parentId }"
        :fileList="formValue.sopFileList"
        style="margin-bottom: 18px"
        :isCustomUpload="true"
        @changeFileList="changeFileList"
        @saveFileStatus="saveFileStatus"
      /> -->
      <FileUpload
        fileType="edit"
        :fileData="{ moduleName: 'eqp' }"
        :fileList="formValue.sopFileList"
        style="margin-bottom: 18px"
        @changeFileList="changeFileList"
        @saveFileStatus="saveFileStatus"
      />
      <px-form-item>
        <px-button type="primary" :disabled="fileStatusFlag" @click="handleSubmit(ruleFormRef)"> 保存 </px-button>
        <px-button @click="resetForm(ruleFormRef)">取消</px-button>
      </px-form-item>
    </px-form>
    <div v-if="type === 'detail'">
      <FileUpload fileType="view" :fileData="{ moduleName: 'eqp' }" isPreview :fileList="formValue.sopFileList" />
    </div>
  </px-scrollbar>
</template>

<script setup lang="ts">
import { saveSOP } from "@/api/equip/archive";
import FileUpload from "@/components/Upload/FileUpload.vue";
import { PxMessage } from "px-ui";
import { computed, ref, watchEffect } from "vue";

const ruleFormRef = ref<any>();

const formValue = ref<Record<string, any>>({});
const fileStatusFlag = ref(false);

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "getEqpDetails"]);

// 父级传过来的值
const props = defineProps(["eqpDetailData", "activeName", "type"]);

watchEffect(async () => {
  if (props.activeName === "sop") {
    formValue.value.sopFileList = props.eqpDetailData.sopFileList;
  }
});

// 表单校验规则
const rules = computed(() => ({
  sopFileList: [{ required: true, message: "请选择文件", trigger: "blur" }]
}));

const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const fileList = [];
      if (formValue.value.sopFileList && formValue.value.sopFileList.length > 0) {
        formValue.value.sopFileList.forEach(item => {
          if (item?.id) {
            fileList.push(item.id);
          } else if (item?.response.data.id) {
            fileList.push(item.response.data.id);
          }
        });
      }
      const res = await saveSOP({
        eqpId: props.eqpDetailData.eqpId,
        sopFileList: fileList
      });
      if (res) {
        PxMessage.success("故障处理SOP修改成功");
        emits("getEqpDetails");
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 新的文件列表
const changeFileList = async (val, isUpdate) => {
  formValue.value.sopFileList = val;
  fileStatusFlag.value = false;
};

// 文件是否上传完，是否可以保存
const saveFileStatus = val => {
  fileStatusFlag.value = val;
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("backMainPage");
};
</script>
